<template>
	<view class="container">
		 <view class="list">
		 	<view class="list-item" :class="selectIndex === 1 ? 'list-active': '' " @click="selectIndex =1">
		 		全部
		 	</view>
			<view class="list-item" :class="selectIndex === 2 ? 'list-active': '' "   @click="selectIndex =2">
				待付款
			</view>
			<view class="list-item"  :class="selectIndex === 3 ? 'list-active': '' "  @click="selectIndex =3">
				待配送
			</view>
			<view class="list-item" :class="selectIndex === 4 ? 'list-active': '' "   @click="selectIndex =4">
				待评价
			</view>
			<view class="list-item" :class="selectIndex === 5 ? 'list-active': '' "   @click="selectIndex =5">
				已完成
			</view>
			
		 </view>
		 
		 <view class="content">
		 	<view class="goods-item" v-for="(item,index) in 4" :key="index" >
		 		<view class="title">
		 			西域水果官方旗舰店
						<text>交易关闭</text>
		 		</view>
		 		<view class="goods-content">
		 			<image src="../../static/mayun.jpg" mode=""></image>
		 			<view class="goods-desc">
		 				海南西州哈密瓜天王文化净重5-6斤当季新鲜水果一箱批次哇哇哇哇
					
					</view>
		 			<view class="goods-price-wrap">
		 				<text>￥68.00</text>
		 				<text>x2</text>
		 			</view>
		 		</view>
		 		<view class="sumje">
		 			<text>共1件</text>
		 			 小计: 
		 			<text>￥1080.00</text>
					<view class="goods-btns" @click="pay">
						去支付
					</view>
		 		</view>
		 		 
		 	</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex:1,
			}
		},
		methods: {
			pay(){
				uni.redirectTo({
					url:'../payment/payment'
				})
			}
		}
	}
</script>

<style>
	
	/* 列表 start */
	.list{
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		height: 100rpx;
		
	}
	.list .list-item{
		font-size: 30rpx;
		margin-top: 30rpx;
	}
	.list-active{
		position: relative;
		color: #ff5500;
		
	}
	.list-active::after{
		content: '';
		position: absolute;
		left: 0px;
		bottom: 20rpx;
		width: 100%;
		height: 2px;
		background-color: #ff5500;
		animation: moveList .1s linear;
	}
	@keyframes moveList{
		from{
			opacity: 0;
			left: -20px;
		}
		to{
			opacity: 1;
			left: 0;
		}
	}
		/* 列表 end */
	
	
	/* 订单item */
	 .goods-item{
		 background-color: #FFFFFF;
		 border-radius: 20px;
		 padding: 20rpx;
		 margin: 20rpx 20rpx;
	 }
	 
	 .goods-item .title{
		 
	 }
	 .goods-item .title text{
		 float: right;
		 color: #F0AD4E;
		 font-weight: 600;
		 font-size: 25rpx;
	 }
	
	.goods-item .goods-content{
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		
		
	}
	.goods-item .goods-content image{
		width: 160rpx;
		height: 160rpx;
		
	}
	.goods-item .goods-content .goods-desc{
		/* border: 1px solid red; */
		margin: 0 20rpx;
		flex: 4;
		font-size: 26rpx;
	
	}
	.goods-item .goods-content .goods-price-wrap{
		
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.goods-item .goods-content .goods-price-wrap text:last-child{
		color: #999999;
	}

	 /* 总计金额 */
	 .goods-item .sumje{
		font-size: 20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 40rpx;
	 
	 }
	 .goods-item .sumje text:first-child{
		 color: #999999;
	 }
	 .goods-item .sumje text:last-child{
		 color: red;
	 }
	 .goods-item .sumje .goods-btns{
		 border: 1px solid #FF0000;
		 width: 150rpx;
		 height: 50rpx;
		 border-radius: 30rpx;
		 text-align: center;
		 line-height: 50rpx;
		 color: #FF0000;
		 font-weight: bold;
		 margin-left: 20rpx;
	 }
	 
 
</style>
